<!--
 * @Author: fisher
 * @Date: 2023-12-28 17:17:37
 * @LastEditTime: 2024-04-08 12:40:28
 * @LastEditors: fisher luthor-li@qq.com
 * @Description: 
 * @FilePath: \front-end-template\src\modules\DataManage\transform\modules\addTask.vue
-->
<template>
  <div class="addTask_content">
    <div class="configuration">
      <div class="section">
        <div class="section_title">1.选择文件</div>
        <div class="section_content">
          <div class="section_item" style="align-items: flex-start">
            <span>选择上传文件：</span>
            <upload class="section_upload" @updateTaskFile="updateTaskFile"></upload>
          </div>
        </div>
      </div>
      <div class="section">
        <div class="section_title">2.设置处理参数</div>
        <div class="section_content">
          <div
            v-for="(item, index) in paramsList"
            :key="index"
            class="section_item"
            style="margin-bottom: 22px"
          >
            <span>{{ item.key }}：</span>
            <!-- 单选 -->
            <input v-if="!item.isSelect" v-model="item.val" type="text" class="section_input" />
            <!-- 多选 -->
            <fks-select
              v-if="item.isSelect"
              v-model="item.val"
              class="section_select"
              multiple
              filterable
              allow-create
              default-first-option
              placeholder="请选择..."
              @change="changeSelect(item)"
            >
              <fks-option v-for="v in item.options" :key="v" :label="v" :value="v"></fks-option>
            </fks-select>
          </div>
        </div>
      </div>
    </div>

    <div class="btn" @click="submit">提交任务</div>
  </div>
</template>

<script>
import upload from '../components/upload.vue'
import { parseTemplateParams, addTaskParams, submitTask, getZipParams } from '../api.js'
export default {
  //import引入组件才能使用
  components: { upload },
  props: {
    templateData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      rowParamsList: [],
      paramsList: [],
      taskFile: {},
      isMergemajors: false,
      mergemajorsOptions: []
    }
  },
  // 计算属性
  computed: {},
  // 监听data中的数据变化
  watch: {},
  // 生命周期，创建完成时（可以访问当前this实例）
  created() {
    this.getParams()
  },
  // 生命周期：挂载完成时（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期：创建之前
  beforeMount() {}, //生命周期：挂载之前
  beforeUpdate() {}, //生命周期：更新之前
  updated() {}, //生命周期：更新之后
  beforeDestroy() {}, //生命周期：销毁之前
  destroyed() {}, //生命周期：销毁完成
  activated() {},
  // 方法集合
  methods: {
    getParams() {
      parseTemplateParams({ templateId: this.templateData.id }).then((res) => {
        this.rowParamsList = []
        this.paramsList = []
        if (res.status) {
          console.log('获取参数成功 == ', res.data)
          // 将所有参数放置在原始参数列表中
          res.data.forEach((item) => {
            // 过滤掉输出文件选项
            if (item.key != 'output_file' && item.key != 'input_file') {
              if (item.isSelect) {
                item.val = [item.val]
              }
              // 创建基础params属性表
              this.rowParamsList.push(item)
            }
          })
          // 根据输出文件格式，动态修改参数列表
          // 判断是否有输出文件格式参数
          const target = this.rowParamsList.find((item) => item.key === '输出文件格式')
          if (target) {
            // 过滤掉包含输出文件所有格式的参数

            this.rowParamsList.forEach((item) => {
              // target.options.every((j) => !item.key.includes(j))
              if (target.options.every((j) => !item.key.includes(j))) {
                this.paramsList.push(item)
              }
            })
            // 添加输出文件已选择的参数
            this.rowParamsList.forEach((item) => {
              if (item.key.includes(target.val)) {
                this.paramsList.push(item)
              }
            })
          }
          // 清理实例化专业默认选项
          const instancemajor = this.rowParamsList.find((item) => item.key === '实例化的专业')
          if (instancemajor) {
            instancemajor.isSelect = true
            instancemajor.options = []
            instancemajor.val = []
            this.isMergemajors = true
          }
          // 清理合并的专业默认选项
          const mergemajor = this.rowParamsList.find((item) => item.key === '合并的专业')
          if (mergemajor) {
            mergemajor.isSelect = true
            mergemajor.options = []
            mergemajor.val = []
            this.isMergemajors = true
          }
        }
      })
    },
    updateTaskFile(val) {
      this.taskFile = Object.assign({}, val)
      if (this.isMergemajors) {
        getZipParams({
          input_file: this.taskFile.URI
        }).then((res) => {
          if (res.status && res.data) {
            this.mergemajorsOptions = [...res.data]
            // 重置实例化专业默认选项
            const instancemajor = this.rowParamsList.find((item) => item.key === '实例化的专业')
            if (instancemajor) {
              instancemajor.options = [...res.data]
            }
            // 重置合并的专业默认选项
            const mergemajor = this.rowParamsList.find((item) => item.key === '合并的专业')
            if (mergemajor) {
              mergemajor.options = [...res.data]
            }
          }
        })
      }
    },
    submit() {
      if (!this.taskFile?.URI) {
        this.$notify({
          title: '警告',
          message: '请上传附件或等待附件上传完成！',
          type: 'warning'
        })
        return
      }
      const params = {
        input_file: this.taskFile.URI
      }
      this.paramsList.forEach((item) => {
        if (item.isSelect) {
          if (item.key == '实例化的专业' || item.key == '合并的专业') {
            if (item.val.length != 0) {
              params[item.key] = item.val.join(',')
            }
          } else {
            params[item.key] = item.val.join(',')
          }
        } else {
          params[item.key] = item.val
        }
      })
      console.log('params == ', params)
      addTaskParams({
        params: JSON.stringify(params),
        templateId: this.templateData.id,
        templateName: this.templateData.templateName,
        status: 0,
        sourceName: this.taskFile.fileName,
        warehouseName: this.templateData.warehouseName,
        warehouseId: this.templateData.warehouseId,
        resourceLocation: 'local'
      }).then((res) => {
        if (res.status) {
          const formData = new FormData()
          formData.append('jobID', res.data.id)
          submitTask(formData).then((res) => {
            this.$router.push('/tasks')

            this.$message({
              message: '任务提交成功!',
              type: 'success'
            })
          })
        }
      })
    },
    changeSelect(val) {
      // 互斥选项清理
      if (val.key == '实例化的专业') {
        const mergemajor = this.rowParamsList.find((item) => item.key === '合并的专业')
        if (mergemajor) {
          mergemajor.options = this.mergemajorsOptions.filter((item) => {
            return !val.val.includes(item)
          })
        }
      }
      // 互斥选项清理
      if (val.key == '合并的专业') {
        const instancemajor = this.rowParamsList.find((item) => item.key === '实例化的专业')
        if (instancemajor) {
          instancemajor.options = this.mergemajorsOptions.filter((item) => {
            return !val.val.includes(item)
          })
        }
      }
      if (val.key == '输出文件格式') {
        // 清理包含输出文件格式的参数
        this.paramsList = this.paramsList.filter((item) => {
          return val.options.every((j) => !item.key.includes(j))
        })
        // 重新载入包含输出格式的参数
        // 添加输出文件已选择的参数
        this.rowParamsList.forEach((item) => {
          val.val.forEach((j) => {
            if (item.key.includes(j)) {
              this.paramsList.push(item)
            }
          })
        })
      }
    }
  } //如果页面有keep-alive缓存功能，这个函数会触发执行
}
</script>
<style lang="scss" scoped>
.addTask_content,
.configuration {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.configuration {
  width: 100%;
  height: calc(100% - 56px);
  overflow-y: scroll;
}
.section {
  width: 63.5%;
  margin-top: 40px;
  &_title {
    padding-bottom: 10px;
    border-bottom: 1px solid rgba($color: #000000, $alpha: 0.1);
    font-size: 20px;
    color: #333;
  }
  &_content {
    margin-top: 25px;
    .section_item {
      display: flex;
      align-items: center;
      gap: 10px;
      span {
        width: 190px;
        text-align: right;
      }
      .section_upload {
        width: 60%;
        height: 200px;
      }
      .section_input {
        width: 60%;
        height: 34px;
        padding: 0 10px;
        border: 1px solid rgba($color: #000000, $alpha: 0.2);
        border-radius: 2px;
        outline: none;
      }
      .section_select {
        width: 60%;
        height: 34px;
      }
    }
  }
}
.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 34px;
  margin: 0 auto;
  border-radius: 2px;
  font-size: 14px;
  color: #fff;
  background-color: #1990ff;
  cursor: pointer;
}
.btn:hover {
  background-color: rgba($color: #1990ff, $alpha: 0.8);
}
</style>
